import { Component, useState } from "react";
import { connect } from "react-redux";
import {
  View,
  Swiper,
  SwiperItem,
  Image,
  Navigator,
  Text,
} from "@tarojs/components";
import Taro, {
  useReady,
  useReachBottom,
  usePullDownRefresh,
} from "@tarojs/taro";
import "./index.scss";
import publicImg from "../../assets/images/public-round.png";
import { activityListApi } from '../../http/Api/activity'

const Index = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const pageSize = 5;
  const [activityList, setActivityList] = useState([]);

  const getListApi = async (cur, flag) => {
    if (!flag) return;

    const res = await activityListApi({
      currentPage: cur,
      pageSize,
    });
    console.log("获取到列表数据：", res);
    if (res.data.code == "200") {
      let data;
      if (cur == 1) {
        data = [];
      } else {
        data = [...activityList];
      }
      const originData = [...data, ...res.data.data];
      setActivityList(originData);

      // 判断是否还有更多的数据
      if (res.data.data.length < pageSize) {
        setHasMore(false);
      }
    }
  };
  useReady(async () => {
    getListApi(currentPage, hasMore);
  });

  // 下拉刷新
  usePullDownRefresh(() => {
    console.log("下拉刷新");
    setCurrentPage(1);
    setHasMore(true);
    getListApi(1, true);
  });

  // 下滑加载更多
  useReachBottom(() => {
    console.log("加载");
    const cur = currentPage + 1;
    setCurrentPage(cur);
    getListApi(cur, hasMore);
  });

  const [swiperBanner] = useState([
    {
      src: "https://t7.baidu.com/it/u=534424398,3641760842&fm=193&f=GIF",
    },
    {
      src: "https://img0.baidu.com/it/u=26724402,505201340&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=475",
    },
    {
      src: "https://img0.baidu.com/it/u=2790500402,2030995045&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=439",
    },
  ]);

  const jumpPublicHandler = () => {
    console.log("---------");
    Taro.navigateTo({
      url: "../packageA/publicActivity/index",
    });
  };

  return (
    <View>
      <Swiper indicatorDots autoplay circular className="banner-swiper">
        {swiperBanner.map((item, index) => (
          <SwiperItem className="banner-swiper-item" key={index}>
            <Image
              className="banner-swiper-image"
              src={item.src}
              mode="aspectFill"
            ></Image>
          </SwiperItem>
        ))}
      </Swiper>

      {/* 所有活动列表 */}

      <View className="activity-list">
        {activityList.map((item) => (
          <Navigator
            className="activity-item"
            url={`/pages/packageB/activityDetail/index?id=${item.activity_id}`}
          >
            <Image
              className="activity-item-image"
              src={item.activity_img}
              mode="aspectFill"
            ></Image>

            <View className="activity-content">
              <View className="activity-titile">{item.activity_title}</View>
              <View className="activity-desc">简介</View>
              <View className="activity-footer">
                <Text>{item.activity_count}</Text>
                <Text>{item.activity_detasel}</Text>
              </View>
            </View>
          </Navigator>
        ))}
      </View>
      {!hasMore && <View>没有更多数据</View>}

      <View className="activity-public" onClick={jumpPublicHandler}>
        <Image className="activity-public-image" src={publicImg}></Image>
      </View>
    </View>
  );
};

export default Index;
